<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-table .layui-form-item{
      margin-bottom: 0px;
    }
    .pane_info .layui-table td, .layui-table th{
      padding: 5px 8px;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">任务名称</label>
              <div class="layui-input-inline">
                <input type="text" name="jobname" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      {{#  if(d.status == '1'){ }}
        <a class="layui-btn layui-btn-warm layui-btn-xs " lay-event="stop">任务暂停</a>
      {{#  }else if( d.status == '2'){ }}
        <a class="layui-btn layui-btn-primary layui-btn-xs " lay-event="start">任务开始</a>
      {{#  } }}
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<!--数据操作-->
<script type="text/html" id="data_operation">
  <div class="pane_info">
    {{#  if(!d.edit){ }}
    <div class="disabled_pane"></div>
    {{#  } }}
    <form class="layui-form layui-form-pane" action="" lay-filter="demo-lay-filter-datainfo">
      {{#  if(d.dataId){ }}
      <input type="hidden"  name="dataId" value="{{d.dataId}}" >
      {{#  } }}

      <table class="layui-table">
        <tbody>
          <tr>
            <td colspan="2">
              <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                  <input type="text" name="jobname" required  lay-verify="required" value="{{d.jobname}}" autocomplete="off" placeholder="请输入任务名称" class="layui-input">
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="layui-form-item">
                <label class="layui-form-label">时间类型</label>
                <div class="layui-input-block">
                  <div id="timetype_"></div>
                </div>
              </div>
            </td>
            <td>
              <div class="layui-form-item">
                <label class="layui-form-label">执行时间</label>
                <div class="layui-input-block">
                  <input type="text" name="cron" required  lay-verify="required" lay-reqtext="执行时间不能为空" value="{{d.cron}}" autocomplete="off" placeholder="请输入执行时间" class="layui-input">
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="layui-form-item">
                <label class="layui-form-label">tigger</label>
                <div class="layui-input-block">
                  <input type="text" name="tigger" required  lay-verify="required" lay-reqtext="tigger不能为空" value="{{d.tigger}}" autocomplete="off" placeholder="请输入tigger" class="layui-input">
                </div>
              </div>
            </td>
            <td>
              <div class="layui-form-item">
                <label class="layui-form-label">group名称</label>
                <div class="layui-input-block">
                  <input type="text" name="groupName" required  lay-verify="required" lay-reqtext="组名称不能为空" value="{{d.groupName}}" autocomplete="off" placeholder="请输入group名称" class="layui-input">
                </div>
              </div>
            </td>
          </tr>
          <tr>
             <td>
               <div class="layui-form-item">
                 <label class="layui-form-label">type</label>
                 <div class="layui-input-block">
                   <div id="type_"></div>
                 </div>
               </div>
             </td>
              <td>
                <div class="layui-form-item">
                  <label class="layui-form-label">clazz</label>
                  <div class="layui-input-block">
                    <input type="text" name="clazz" disabled  lay-verify="required" lay-reqtext="clazz不能为空" value="{{d.clazz}}" autocomplete="off" placeholder="请输入clazz" class="layui-input">
                  </div>
                </div>
              </td>
          </tr>
          <tr>
            <td>
              <div class="layui-form-item">
                <label class="layui-form-label">方法class</label>
                <div class="layui-input-block">
                  <div id="methodclazz_"></div>
                </div>
              </div>
            </td>
            <td>
              <div class="layui-form-item">
                <label class="layui-form-label">方法名称</label>
                <div class="layui-input-block">
                  <div id="methodname_"></div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
             <td colspan="2">
               <div class="layui-form-item">
                 <label class="layui-form-label">执行参数</label>
                 <div class="layui-input-block">
                   <input type="text" name="params"  value="{{d.params}}" autocomplete="off" placeholder="请输入执行参数" class="layui-input">
                 </div>
               </div>
             </td>
          </tr>
          <tr>
            <td colspan="2">
              <textarea placeholder="请输入备注" name="note" value="{{d.note}}" class="layui-textarea"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</script>


<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/jquery-3.7.1.min.js"></script>
<script src="../js/crypto-js.min.js"></script>
<script src="../js/common.js"></script>
<script src="/lay/t-secrypt-script.js"></script>
<script>
  layui.use(['form', 'table','laytpl'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
    var laytpl = layui.laytpl; //模版

    let tableUrl="/job/page";
    let saveOrUpdateUrl="/job/saveorupdatejob";
    let deleteDataUrl="";
    let id="id";

    table.render({
      elem: '#currentTableId',
      method:'POST',
      url: tableUrl,
      toolbar: '#toolbarDemo',
      contentType:'application/json',
      request: {
        pageName: 'pageNum' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
        {field: 'id', width: 80, title: 'ID', sort: true},
        {field: 'jobname', width: 180, title: '任务名称'},
        {field: 'typeName', width: 180, title: '任务类型'},
        {field: 'timeTypeName', width: 150, title: '执行时间类型', sort: true},
        {
          field: 'statuName', width: 180, align: 'center', templet: function (d) {
            return '<span class="layui-badge layui-bg-gray">'+d.statuName+'</span>';
          }, title: '任务状态'
        },
        {field: 'methodclazz', width: 180, title: '任务执行类', sort: true},
        {field: 'methodname', width: 180, title: '任务执行方法', sort: true},
        {field: 'createTime', width: 180, title: '创建时间'},
        {title: '操作', fixed: 'right',minWidth: 250, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field);
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          search: data.field
        }
      }, 'data');
      return false;
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        layutils.ajaxGet('/job/gettiggerorgroup',null,function (res){
            if(res.code==200){
              let d=res.data;
               let initData={ jobname:"",cron:"",tigger:d.tigger,clazz:"",type:"",methodclazz:"",methodname:"",params:"[]",groupName:d.group,timetype:"",type:""};
               add(initData);
            }
        });

      } else if (obj.event === 'delete') {  // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId')
                , data = checkStatus.data;
        if(data.length==0){
          return layer.msg('未选择数据', {icon: 0});
        }
        let arr=[];
        for (let i = 0; i < data.length ; i++) {
          let o=data[i];
          arr.push(o[id]+'');
        }
        layer.confirm('真的删除选中数据吗', function (index) {
          layer.close(index);
          del(arr);
        })
      }
    });

    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });

    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        update(data);
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除数据吗', function (index) {
          layer.close(index);
          let arr=[];
          arr.push(data[id]+'')
          del(arr);
        });
      }else if(obj.event==='stop'){
        layer.confirm('确定暂停【'+data.jobname+'】任务吗', function (index) {
          let reqObj={id:data.id};
          layutils.ajaxJsonPost('/job/stop',JSON.stringify(reqObj),function (e){
            if(e.code==200){
              layer.msg(e.message, {icon: 1});
              table.reload('currentTableId');
            }
          })
        })
      }else if(obj.event==='start'){
        layer.confirm('确定开始【'+data.jobname+'】任务吗', function (index) {
          let reqObj={id:data.id};
          layutils.ajaxJsonPost('/job/start',JSON.stringify(reqObj),function (e){
            if(e.code==200){
              layer.msg(e.message, {icon: 1});
              table.reload('currentTableId');
            }
          })
        })
      }
    });



    function add(data){
      data.edit=true;
      templateRender('data_operation',data,function (html){
        layerPage('添加操作',html,data,'80%','90%',function (index){
          let json = form.val('demo-lay-filter-datainfo');
          layutils.ajaxJsonPost(saveOrUpdateUrl,JSON.stringify(json),function (res){
            if(res.code==200){
              layer.msg(res.message, {icon: 1},function (){
                layer.close(index);
              });
              table.reload('currentTableId');
            }else {
              layer.msg(res.message, {icon: 2});
            }
          })
        })
        commonRender(data);
      })
    }
    let timeTypeList;
    let typeList;
    let methodList=[];
    function commonRender(data){
      layutils.ajaxGet('/job/gettimetypelist',null,function (res){
        if(res.code==200){
          timeTypeList=res.data;
          selectRender('timetype_','timetype',res.data,'typeName','type',data.timetype);
        }
      })
      layutils.ajaxGet('/job/gettypelist',null,function (res){
        if(res.code==200){
          typeList=res.data;
          selectRender('type_','type',res.data,'type','status',data.type);
        }
      })
      selectChangeEvent('type_',function (v,e){
          let val=layutils.searchObjList(typeList,'status',v);
          if(val!==null){
            $('input[name="clazz"]').val(val.quartClazz);
            if(v=='2'){
                 layutils.ajaxGet('/job/getannotationlist',null,function (res){
                      if(res.code==200){
                        methodclazzSelect(data,res.data);
                      }
                 })
            }else {
              methodclazzInput(data);
            }
          }
      });
      methodclazzInput(data);
      updateMethodSelect(methodList,data.methodname);
    }

    function methodclazzSelect(data,arr){
       selectRender('methodclazz_','methodclazz',arr,'label','value',data.methodclazz);
        selectChangeEvent('methodclazz_',function (v,e){
          layutils.ajaxGet('/job/getclass?clazz='+v,null,function (res){
            if(res.code==200){
              flushMethodSelect(v,data.methodname)
            }
          })
       });
    }

    function methodclazzInput(data){
      $("#methodclazz_").empty();
      let str='<input type="text" name="methodclazz"  lay-verify="required" lay-reqtext="methodclazz不能为空" value="'+data.methodclazz+'" autocomplete="off" placeholder="请输入clazz" class="layui-input">';
      $("#methodclazz_").html(str);
      $('input[name="methodclazz"]').on('change',function (){
        const inputValue = $(this).val();
        layutils.ajaxGet('/job/getclass?clazz='+inputValue,null,function (res){
          if(res.code==200){
            flushMethodSelect(inputValue,data.methodname)
          }
        })
        console.log(inputValue);
      })
    }
    function flushMethodSelect(clazz,data){
        layutils.ajaxGet('/job/getclassmethodlist?clazz='+clazz,null,function (res){
            if(res.code==200){
              if(data){
                 res.data.push({label:data,value:data})
              }
              updateMethodSelect(res.data,data)
            }else {
              layer.msg(res.message, {icon: 2});
            }
        })
    }
    function updateMethodSelect(data,value){
      let str=selectRender('methodname_','methodname',data,'label','value',value);
      console.log(str);
    }

    function selectChangeEvent(id,callback){
      form.on('select(demo-select-filter'+id+')', function(data){
        var elem = data.elem; // 获得 select 原始 DOM 对象
        var value = data.value; // 获得被选中的值
        callback(value,elem);
      });
    }

    function selectRender(id,name,list,label,value,selectValue){
      if(selectValue==null || selectValue==undefined){
        selectValue='';
      }
      let str='<select name="'+name+'" value="'+selectValue+'" lay-filter="demo-select-filter'+id+'">';
      str+='<option value="">请选择</option>';
      for (let i = 0; i < list.length; i++) {
         let obj=list[i];
         if(selectValue==obj[value]){
           str+='<option value="'+obj[value]+'" selected>'+obj[label]+'</option>';
         }else {
           str+='<option value="'+obj[value]+'">'+obj[label]+'</option>';
         }
      }
      str+='</select>';
      $("#"+id).html(str);
      form.render();
      return str;
    }

    function update(data){
      data.edit=true;
      data.dataId=data[id];
      templateRender('data_operation',data,function (html){
        layerPage('修改操作',html,data,'80%','90%',function (index){
          let json = form.val('demo-lay-filter-datainfo');
          json[id]=json.dataId;
          delete json.dataId;
          layutils.ajaxJsonPost(saveOrUpdateUrl,JSON.stringify(json),function (res){
            if(res.code==200){
              layer.msg(res.message, {icon: 1},function (){
                layer.close(index);
              });
              table.reload('currentTableId');
            }else {
              layer.msg(res.message, {icon: 2});
            }
          })
        })
        commonRender(data);
        flushMethodSelect(data.methodclazz,data.methodname);
        form.render();

      })
    }

    function del(ids){
      let idData={ids:ids};
      layutils.ajaxJsonPost(deleteDataUrl,JSON.stringify(idData),function (res){
        if(res.code==200){
          layer.msg(res.message, {icon: 1});
          table.reload('currentTableId');
        }else {
          layer.msg(res.message, {icon: 2});
        }
      });
    }


    //模板渲染
    function templateRender(templateId,data,callback){
      var getTpl = $('#'+templateId).html();
      laytpl(getTpl).render(data, function(html){
        callback(html);
      });
    }

    //操作弹窗，充满整页
    function layerFullPage(title,html,data,callback){
      let index=layer.open({
        type: 1
        ,title: title
        ,shade: 0.2,
        maxmin:true,
        shadeClose: true,
        area: ['100%', '100%']
        ,content: html
        ,btn: ['确认', '取消']
        ,yes: function(){
          callback(index);
        }
        ,btn2: function(){
          layer.close(index);
        }
      });
    }

    //操作弹窗
    function layerPage(title,html,data,width,height,callback){
      let index=layer.open({
        type: 1
        ,title: title
        ,maxmin:true
        ,area: [width, height]
        ,content: html
        ,btn: ['确认', '取消']
        ,yes: function(){
          callback(index);
        }
        ,btn2: function(){
          layer.close(index);
        }
      });
    }

    function addClickById(id,callback){
      let id_='#'+id;
      $(id_).click(function (e){
        callback(e);
      });
    }
    //操作弹窗，充满整页
    function layerFullPage(title,html,data,callback){
      let index=layer.open({
        type: 1
        ,title: title
        ,shade: 0.2,
        maxmin:true,
        shadeClose: true,
        area: ['100%', '100%']
        ,content: html
        ,btn: ['确认', '取消']
        ,yes: function(){
          callback(index);
        }
        ,btn2: function(){
          layer.close(index);
        }
      });
    }


  });
</script>

</body>
</html>